概述
Web Speech API（网页语音 API）是一组用于实现语音识别（Speech Recognition）和语音合成（Speech Synthesis）功能的浏览器 API。它允许开发者在网页上利用语音交互，使用户能够通过语音输入和语音输出与网页进行交互。
Web Speech API 提供了以下两个主要的功能模块：
-
语音合成（Speech Synthesis）：允许将文本转换为语音输出。通过使用
SpeechSynthesis对象，网页可以将文本转换为语音，并播放出来。这个功能模块依赖于底层系统的语音合成引擎。 -
语音识别（Speech Recognition）：允许将用户的语音输入转换为文本。通过使用
SpeechRecognition对象，网页可以监听用户的语音输入，并将其转换为文本，以便进行语音命令、语音搜索、语音填写表单等应用。这个功能模块依赖于底层系统的语音识别引擎。
开始
语音合成
function speak(text) {
let textContent = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(textContent);
}
属性
voice设置将用于说出语音的声音，默认getVoices()方法获取当前设备支持的语音选项数组的第一个。rate设置将用于说出语音的速度，默认 1，范围 0-2。pitch设置将用于说出语音的音调，默认 1，范围 0-2。volume设置将用于说出语音的音量，默认1，范围 0-1。
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="speak('hello world')">Speak</button>
<select id="voiceSelect"></select>
</body>
<script>
let utterance = new SpeechSynthesisUtterance("hello");
let voices = [];
let select = document.getElementById("voiceSelect");
speechSynthesis.onvoiceschanged = function (event) {
voices = speechSynthesis.getVoices();
createVoiceOption(voices);
};
select.onchange = function () {
utterance.voice = voices.find(
(voice) => voice.name === select.selectedOptions[0].getAttribute("data-name")
);
utterance.lang = select.selectedOptions[0].getAttribute("data-lang");
};
function createVoiceOption(voices) {
for (let i = 0; i < voices.length; i++) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;
if (voices[i].default) {
option.textContent += " — DEFAULT";
}
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
document.getElementById("voiceSelect").appendChild(option);
}
}
function speak(text) {
utterance.text=text;
speechSynthesis.speak(utterance);
}
</script>
</html>
语音识别
完整示例
<!DOCTYPE html>
<html>
<head>
<title>语音识别示例</title>
</head>
<body>
<button id="startButton">开始识别</button>
<div id="result"></div>
<script>
const startButton = document.getElementById('startButton');
const resultDiv = document.getElementById('result');
let recognition;
// 创建 SpeechRecognition 对象
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
} else if ('SpeechRecognition' in window) {
recognition = new SpeechRecognition();
} else {
console.error('浏览器不支持语音识别功能');
}
// 配置识别参数
recognition.continuous = true;
recognition.lang = 'zh-CN'; // 设置识别语言，默认为浏览器语言
// 识别结果回调
recognition.onresult = function(event) {
const transcript = event.results[event.results.length - 1][0].transcript;
resultDiv.textContent = transcript;
console.log(transcript)
};
// 开始识别
startButton.addEventListener('click', function() {
recognition.start();
});
</script>
</body>
</html>